<template>
    <div>
        <el-dialog
            width="70%"
            title="商品SKU"
            :visible.sync="visibleSkus"
            :close-on-click-modal="false">

            <!-- 表格 -->
            <el-table
                ref="tableSku"
                size="medium"
                height="500"
                empty-text="暂无数据"
                element-loading-text="给我一点时间"
                fit border highlight-current-row
                v-loading="loadingSku"
                :data="dataListSku">


                <el-table-column label="序号" type="index" prop="index" width="60" align="center" />
                <el-table-column label="规格图片" align="center" width="130">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.skuImg" fit="contain"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="SKU名称" width="300">
                    <template slot-scope="scope">
                        <div>SKU码：{{scope.row.id}}</div>
                        <div>{{scope.row.skuName}}</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="SKU名称" prop="skuName" align="left" width="300" show-overflow-tooltip/> -->
                <el-table-column label="销售价(元)" width="120" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span style="color: red;">￥{{scope.row.salePrice}}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="成本价(元)" width="120" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>￥{{scope.row.costPrice}}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="市场价(元)" width="120" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>￥{{scope.row.marketPrice}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="库存" prop="stockNum" align="left" width="120" show-overflow-tooltip/>
                <el-table-column label="销量" prop="salesVolume" align="left" width="120" show-overflow-tooltip/>
                <!-- <el-table-column label="条形码" prop="barcode" align="left" show-overflow-tooltip/> -->

            </el-table>

        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loadingSku: false,
            visibleSkus: false,
            dataListSku: []
        }
    },

    methods: {
        init(spuId) {
            const refs = this.$refs
            this.visibleSkus = true

            this.$nextTick(() => {
                this.getDataList(spuId)
            })
        },

        /**
         * 获取表格数据
         */
        async getDataList(spuId) {
            this.loadingSku = true
            const res = await this.$http({
                url: '/mall/pmssku/list',
                method: 'GET',
                params: {spuId}
            })
            if (this.ResultMessage(res, false)) {
                this.dataListSku = res.data || []
            }
            this.loadingSku = false
        },

    }
};
</script>

<style lang="scss" scoped></style>
